﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <title>历史排位</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../assets/layui/css/layui.css">
    <link rel="stylesheet" href="../css/plugins/select-multiple.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/plugins/plugin-condition.css">
    <link rel="stylesheet" href="../assets/layui-v2.4.5/css/layui.css">
</head>
<style type="text/css">
    .layui-input-inline{
        float: left;
        width: 115px;
        margin-right: 10px;
    }
</style>
<body onload='init()'>
<div style="width:55%; height: 100%;float: left;border-right: 1px solid #000;" id="customizeStation" lay-filter="customizeStation" class="select-customize-station layui-form">
    <form class="layui-form layui-input-inline" action="" id="form_sea" style="width:100%; height: 100%;">
        <div class="layui-form-item pluginsSingleRows" style="width:100%;height:100%;float: left;">
            <div id="div_province" class="layui-inline">
                <label class="layui-form-label">省市:</label>
                <div class="layui-input-inline" style=" width: 130px;">
                    <select lay-filter="customizeProvince" id="customizeProvince" name="customizeProvince">
                        <option value="全部">全部</option>
                    </select>
                </div>
            </div>

            <div id="div_Country" class="layui-inline">
                <label class="layui-form-label">县区:</label>
                <div class="layui-input-inline" style=" width: 130px;">
                    <select lay-filter="customizeCounty" id="customizeCounty" name="customizeCounty">
                        <option value="全部">全部</option>
                    </select>
                </div>
            </div>
            <table id="customizeStationTable" lay-filter="customizeStationTable"></table>
        </div>
    </form>
</div>
<div id="elementCheck"  style="width:45%; height: 100%;float: left;">
    <div class="layui-form-item pluginsSingleRows" style="width:100%;height:100%;float: left;">
        <div id="div_element" class="layui-inline">
            <label class="layui-form-label">开始日期</label>
            <div class="layui-input-inline" style="width: 25%;">
                <input name="startTime" type="text" class="layui-input" id="startTime" placeholder="yyyy-MM-dd">
            </div>
            <label class="layui-form-label">结束日期</label>
            <div class="layui-input-inline"  style="width: 25%;">
                <input name="endTime" type="text" class="layui-input" id="endTime" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div id="div_Country2" class="layui-inline">
            <label class="layui-form-label">要素:</label>
            <div class="layui-input-inline" style=" width: 130px;">
                <select lay-filter="elementName" id="elementName" name="elementName">
                    <!--<option value="全部">全部</option>-->
                    <option value="dayAvgTemp">单日平均气温</option>
                    <option value="dayRain">单日降水</option>
                    <option value="daySunny">单日日照时数</option>
                </select>
            </div>
            <div class="layui-input-inline" id="search_div" style="width: 115px;margin-right: 62px;float: right">
                <button class="layui-btn layui-btn-normal btn_sub" lay-submit=""  lay-event="getCheckData"  id="btn_sub" lay-filter="demo1">搜索</button>
            </div>
        </div>
        <table id="elementTable" lay-filter="elementTable"></table>
    </div>
</div>
<!--</form>-->

<script type="text/javascript" src="../assets/jquery/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../assets/layui/layui.js" charset="utf-8"></script>
<script src="../js/global.js"></script>
<script type="text/javascript">
    /*所有站点*/
    station=[],
        /*当前面板选择的站点*/
        selectStation= [],
        layui.use(['form','table', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

            //年月选择器
            laydate.render({
                elem: '#startTime'
                , type: 'date'
            });
            laydate.render({
                elem: '#endTime'
                , type: 'date'
            });
        });
    function init() {
        // 初始化内容
        $.ajax({
            //后台查询所有站点信息及省市县三级信息
            url: 'http://10.172.13.58:8088/MDRMSWebService/mdrms/queryAllBaseStation',
            type: 'post',
            dataType: 'json',
            success: function (res) {
                //res = JSON.parse(res);
                // console.log(res);
                /*渲染自定义站数据表格面板*/
                renderStation(res.data);
            },
            error: function (e) {
                console.log(e);
            }
        });
        // renderStation(Global.countryStationsValue);
    };
    //点击搜索
    $("#btn_sub").click(function () {
        if ($("#startTime").val() == null || $("#startTime").val() == "") {
            layer.alert("开始时间不能为空！");
        }else if($("#endTime").val() == null || $("#endTime").val() == ""){
            layer.alert("结束时间不能为空！");
        }else{
            var start=$('#startTime').val().split("-");
            var end=$('#endTime').val().split("-");
            var year=start[0];
            var monday=start[1]+start[2];
            var type=$('#elementName option:selected') .val();
            $.ajax({
                //单站排位
                url: 'http://10.172.13.58:8088/MDRMSWebService/largeFams/queryRankAllByelement?V01000=57245&V04001='+year+'&V04002='+monday+'&type='+type,
                type: 'post',
                dataType: 'json',
                // data: {
                //     "V01000": localStorage.getItem("cropName"),
                //     "V04001": $("#imgType").val(),
                // },
                success: function (res) {
                    //res = JSON.parse(res);
                    /*排位数据表格面板*/
                    renderElement(res.data.rank);
                },
                error: function (e) {
                    console.log(e);
                }
            });
        }

    })
    function renderElement(element) {
        layui.table.render({
            elem: '#elementTable',				//绑定圆元素
            // toolbar: toolBar,					//展示工具栏以及自定义工具元素
            title: '站点信息',			//表名字
            // height: 'full-250',				//高度，自适应
            cellMinWidth: 100,				//最小列宽
            skin: 'row', 							//皮肤，无上下边框
            even: true,								//皮肤，开启隔行显示
            cols: [[
                // {type:'checkbox',fixed: 'left'},
                {field: 'v01000', title: '站号',height:150 },
                {field: 'v04001', title: '年' ,height:150},
                {field: 'v04002', title: '月',height:150},
                {field: 'v04003', title: '日',height:150},
                {field: 'sUMVALUE', title: '值',height:150 },
                {field: 'rANK', title: '排位',height:150}
            ]],				//表头
            page: true,								//开启分页
            limit: 50,
            limits: [50, 100, 500, 1000, 2000, 3000],		//分页条数自定义
            data: element			//数据
        });
    }
    function renderStation(response) {
        /*省市区县选择*/
        if(response.allStation.length>0){
            for(var x=0;x<response.allStation.length;x++){
                if(response.allStation[x].V01000.substring(0,1)=="5"){
                    station.push(response.allStation[x])
                }
            }
        }
        var province = response.provCityArea[0].prov_city.reduce(function (all, cur) {
            return all += '<option data-area="'+ cur.city_area +'" value="'+ cur.city +'" >'+ cur.city +'</option>';
        },'<option data-area="全部" value="全部">全部</option>');
        $("#customizeProvince").html(province);
        layui.form.render(null, 'customizeStation');
        /*站点选*/
        // layForm.on('select(customizeStationType)', function () { _this.reloadStation(); });
        /*区县选择*/
        layui.form.on('select(customizeCounty)', function () { reloadStation(); });
        /*省选择触发市区*/
        layui.form.on('select(customizeProvince)', function (data) {
            var areas = $(data.elem).children('option[value="'+ data.value +'"]').attr('data-area').split(',');
            var area = areas.reduce(function (all, cur) {
                return all += cur === '全部' ? '' : '<option value="'+ cur +'">'+ cur +'</option>';
            }, '<option value="全部">全部</option>');

            $('#customizeCounty').html(area);
            layui.form.render(null, 'customizeStation');
            reloadStation();
        });
        var toolBar = '  <div class="layui-btn-container"> ' +
            '<button style="display: none;" id="getCheckCustomizeStation" lay-event="getCheckData">获取所有选中静态数据</button> ' +
            '</div>';

        layui.table.render({
            elem: '#customizeStationTable',				//绑定圆元素
            toolbar: toolBar,					//展示工具栏以及自定义工具元素
            title: '站点信息',			//表名字
            height: 'full-250',				//高度，自适应
            cellMinWidth: 100,				//最小列宽
            skin: 'row', 							//皮肤，无上下边框
            even: true,								//皮肤，开启隔行显示
            cols: [[
                {type:'checkbox',fixed: 'left'},
                {field: 'CHAREAPROVINCE', title: '所属省' },
                {field: 'CHAREACITY', title: '所属市' },
                {field: 'CHAREACOUNTRY', title: '所属区'},
                {field: 'V01000', title: '站号'},
                {field: 'CHNAME', title: '站名'},
            ]],				//表头
            page: true,								//开启分页
            limit: 50,
            limits: [50, 100, 500, 1000, 2000, 3000],		//分页条数自定义
            data: station			//数据
        });
        //监听行工具事件
        layui.table.on('toolbar(customizeStationTable)', function(obj){
            switch(obj.event){
                case 'getCheckData':
                    _this.selectStation = obj.config.data.filter(function(cur) {
                        return String(cur.LAY_CHECKED) === 'true'
                    }).map(function (val) {
                        return val.V01000;
                    });
                    break;
            }
        });

    }
    /*筛选重载*/
    function  reloadStation(){
        var data = station.filter(function (cur) {
            cur.LAY_CHECKED = true;
            var province = $('#customizeProvince').val(),
                county = $('#customizeCounty').val(),
                stationname ='CountryStation',
                province = province === '全部' ? '' : province;
            county = county === '全部' ? '' : county;
            return String(cur.STATYPE).indexOf(stationname) > -1 &&
                ( String(cur.CHAREACITY).indexOf(province) > -1 || province.indexOf(String(cur.CHAREACITY)) > -1 ) &&
                String(cur.CHAREACOUNTRY).indexOf(county) > -1;
        });
        layui.table.reload('customizeStationTable', {
            data: data,
            page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }

</script>

</body>

</html>